<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id ="app">
        姓：<input type="text" v-model="xName"><br>
        名：<input type="text" v-model="mName"><br>
        姓名：<span>{{fullName}}</span>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            data: {
                xName:'张',
                mName:'三'
            },
            computed: {
                fullName:{
                    // get有什么作用？  当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用？    1.第一次读取fullName时  2.所依赖的数据发生变化时
                    get() {
                        console.log("get被调用了")
                        return this.xName+'_'+this.mName
                    },

                    // set什么时候调用？    当fullName被修改时
                    set(value) {
                        console.log(value)
                        const arr = value.split('_')
                        this.xName = arr[0]
                        this.mName = arr[1]
                    }
                }
            }
        });

        
    </script>
</body>
</html>